import React from 'react';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';

const BaseBar = (props: any) => {
  const { data, cols, fieldNames } = props;

  return (
    <Chart height={400} data={data} scale={cols} forceFit>
      <Axis name={fieldNames.label} />
      <Axis name={fieldNames.value} />
      <Legend />
      <Tooltip />
      <Geom
        type="interval"
        position={`${fieldNames.label}*${fieldNames.value}`}
        color={fieldNames.label}
      />
    </Chart>
  );
};

export default BaseBar;
